<template>
  <div style="height: 87vh;  overflow-y: auto">
    <el-container>

<el-header style="width: 100% ;">
  <el-row>
    <el-col style="padding: 0px;" :span="24">
      <el-image style="width: 100% ;height: 300px" :src="'https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0'"  />
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <el-row style="">

    <el-col :offset="4" :span="2">

      <el-avatar :size="80" style="float: left;">
        <el-image :src="'https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0'" />
      </el-avatar>
    </el-col>
    <el-col :span="5">
      <h2>
        {{this.$cookies.get("user").nick}}
      </h2>
    </el-col>
    <el-col  :span="5" align="right">
      <el-button type="primary">关注</el-button>
      <el-button type="primary">私信</el-button>
    </el-col>

  </el-row>
<el-divider></el-divider>
  <el-row>
    <el-col :span="24" >
      <div style="width: 80%;margin: auto">
        <el-tabs v-model="activeIndex"  @tab-click="setType">
          <el-tab-pane label="首页"  name="0" ></el-tab-pane>
          <el-tab-pane label="关注"  name="1"></el-tab-pane>
          <el-tab-pane label="简介"  name="3"></el-tab-pane>
        </el-tabs>
        <div v-if="type==0">
          <el-row style=""  v-for="(o) in videoData"  >
            <el-col  >

              <Myvideo :videoh="o" ></Myvideo>

            </el-col>
          </el-row>
          <div class="pager">
            <el-pagination
                :page-size="this.pageData.pageSize"
                :pager-count="7"
                layout="prev, pager, next"
                :total="total"
                @current-change="currentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-show="type==3">
          <el-row>
            <el-col :offset="1">
             <strong>用户名:</strong>  {{this.$cookies.get("user").nick}}
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :offset="1">
              <strong>简介：</strong>这个人很懒什么都没用留下
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :offset="1">
              <strong>视频总数：</strong> 9
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :offset="1">
              <strong>粉丝数： </strong>hh
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :offset="1">
              <strong>关注数：</strong> ff
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :offset="1">
              <strong>加入时间：</strong> ff
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
        <div v-show="type==1">
          <el-row v-for="(o) in mycorn"  :key="o.id" style="margin-top: 20px;">
            <el-col  :span="2">

              <el-avatar :size="50" style="float: left;">
                <el-image :src="'https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0'" />
              </el-avatar>
            </el-col>
            <el-col :span="5">
              <h3>
                {{o.cuser.nick}}
              </h3>
            </el-col>
            <el-col  :span="10" align="right">
              <el-button type="primary">取消关注</el-button>
              <el-button type="primary">私信</el-button>
            </el-col>

          </el-row>

        </div>
      </div>

    </el-col>
  </el-row>



</el-header>





</el-container>
  </div>

</template>

<script>
import { mycon, myvideoall} from "@/api";

import Myvideo from "@/components/user/Myvideo.vue";
export  default {
  components:{Myvideo},
  mounted: function () {

    myvideoall({params:{uid:this.$cookies.get("user").id,...this.pageData}}).then(
        res=>{
          this.videoData=res.data.data.list
          this.total=res.data.data.total||0
          console.log(res)
        }
    ),
      this.getcon()

  },
  data() {
    return {
      videoData:[],
      type:0,
      activeIndex:'0',
      mycorn:[],
      total: 0,
      pageData: {
        pageNum: 1,
        pageSize: 4,
      },

      }
    },
    methods:{
    getcon(){
      mycon({params:{uid:this.$cookies.get("user").id}}).then(
          res=>{
            this.mycorn=res.data.data.list
          }
      )
    },
      setType(val,e){
        this.type=this.activeIndex
        // console.log( this.type)
      },
      getList() {
        myvideoall({params:{uid:this.$cookies.get("user").id,...this.pageData}}).then(
            res=>{
              this.videoData=res.data.data.list
              this.total=res.data.data.total||0

            }
        )
     },
      currentChange(val) {
        this.pageData.pageNum = val
        this.getList()
      },
    }
  }



</script>

<style scoped>

  .pager{
    position: relative;
    bottom: 0px;
  }
</style>
